<template>
  <view class="empty">
    <view class="img-box">
      <image
        :src="'../../static/public/img/empty/' + imgUrl"
        mode="scaleToFill"
      />
    </view>
    <view class="title text-gray" >{{ title }}</view>
    <view v-if="isBtn" class="bth-path" :class="'bg-'+theme.backgroundColor" @tap.stop="goPage">
      {{ btnText }}
    </view>
  </view>
</template>
<script>
const app = getApp();
export default {
  props: {
    imgUrl: {
      type: String,
      default: "sc.png",
    },
    title: {
      type: String,
      default: "暂无收藏",
    },
    btnText: {
      type: String,
      default: "逛逛商品",
    },
    isBtn: {
      type: Boolean,
      default: true,
    },
    path: {
      type: String,
      default: "/pages/goods/goods-category/index",
    },
    isCuJump:{
      type:Boolean,
      default:false
    },
    // 1:navigateTo 2:redirectTo 3:switchTab 4:reLaunch 5:navigateBack
    jumpType: {
      type: Number,
      default: 3, //
    },
  },
  data() {
    return {
      theme: app.globalData.theme, //全局颜色变量

    };
  },
  methods: {
    goPage() {
      this.$emit('goPage')
      if(!this.isCuJump){
        this.$goUrl(this.path, this.jumpType)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.empty{
  margin-top:166rpx;
}
.img-box {
  width: 320rpx;
  height: 328rpx;
  margin: 0 auto;
  image {
    width: 100%;
    height: 100%;
  }
}
.title{
  text-align: center;
  margin-top: 66rpx;

}
.bth-path {
  width: 320rpx;
  height: 80rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  color: #ffffff;
  margin: 0 auto;
  margin-top: 48rpx;
}
</style>
